<template>
  <div class="taskmanage">
    <van-tabbar v-model="active" @change="onChange">
      <van-tabbar-item icon="checked">已完成</van-tabbar-item>
      <van-tabbar-item icon="question">待评价</van-tabbar-item>
      <van-tabbar-item icon="more">待审核</van-tabbar-item>
      <van-tabbar-item icon="clear">已拒绝</van-tabbar-item>
      <van-tabbar-item icon="warning">申诉</van-tabbar-item>
      <van-tabbar-item icon="todo-list">历史记录</van-tabbar-item>
    </van-tabbar>
    <div class="activebox" v-if="isshow">
      <div class="activeone" v-for="item in taskinfo" :key="item.id">
        <p class="titledate">
          <span class="first">
            <van-icon name="clock-o"/>
            <span style="margin-left:5px">{{ item.create_time }}</span>
          </span>
          <span class="typestyle"
                :class="{'red':item.task_class == 'pt','green':item.task_class == 'll','blue':item.task_class == 'pj','black':item.task_class == 'gy','purple':item.task_class == 'dy','pink':item.task_class == 'pdd'}">
            {{ item.task_class == 'dy' ? '抖音' : (item.task_class == 'll' ? '浏览' : (item.task_class == 'pj' ? '评价' : (item.task_class == 'pt' ? '普通' : (item.task_class == 'pdd' ? '拼多多' : '隔夜')))) }}
          </span>
        </p>
        <p class="picimg">
          <img :src="item.goods_img" alt="">
          <span
            v-if="item.pj_status==1&&item.task_class=='pj' || item.pj_status==1&&item.task_class == 'pdd' || item.pj_status==1&&item.task_class == 'dy'"
            style="color: #fff;background:#a0c3fb">待上传评价</span>
          <span
            v-if="item.pj_status==3&&item.task_class=='pj' || item.pj_status==3&&item.task_class == 'pdd' || item.pj_status==3&&item.task_class == 'dy'"
            style="color: #fff;background:#a0c3fb">评价待审核</span>
          <span
            v-if="item.pj_status==2&&item.task_class=='pj' || item.pj_status==2&&item.task_class == 'pdd' || item.pj_status==2&&item.task_class == 'dy'"
            style="color: #fff;background:#a0c3fb">评价完成</span>
          <span
            v-if="item.pj_status==4&&item.task_class=='pj' || item.pj_status==4&&item.task_class == 'pdd' || item.pj_status==4&&item.task_class == 'dy'"
            @click="to_evaluate(item.create_time,item.id,item.task_class,item.baby_id,item.task_order)"
            style="color: #fff;background:#a0c3fb">开始评价</span>
        </p>
        <div class="bottombox">
          <p v-if="item.task_class == 'pt'">
            <span>淘单号：{{ item.task_order }}</span>
            <span style="color:#fb9414;" v-clipboard:copy="item.task_order" v-clipboard:success="onCopy"
                  v-clipboard:error="onError">复制</span>
          </p>
          <p
            v-if="item.task_class == 'pj' && item.task_status == 7 || item.task_class == 'pdd' && item.task_status == 7 || item.task_class == 'dy' && item.task_status == 7">
            <span style="color:red;font-size:18px;font-weight:600;">请耐心等待商家审核！</span>
          </p>
          <p v-if="item.task_status == 2">
            <span>审核状态：已拒绝</span>
          </p>
          <p style="font-size:16px;margin-top:10px;margin-bottom:10px;color:rebeccapurple;font-weight:600"
             v-if="item.task_refandstatus != 'NO_REFUND'">
            退款状态:{{ item.task_refandstatus }}
          </p>
          <div
            v-if="item.task_status ==3&&item.task_class=='pj' && item.pj_status!='2' || item.task_status ==3&&item.task_class=='pdd' && item.pj_status!='2' || item.task_status ==3&&item.task_class=='dy' && item.pj_status!='2'">
            <span>付款金额：</span>
            <span class="btnmoney" :class="{'blue':item.tx_status == 2 || item.tx_status == 3}"
                  @click="handleMoney(item)">{{ item.tx_status == 2 || item.tx_status == 3 ? '已提本金(￥' + item.task_bjmoney + ')' : '本金(￥' + item.task_bjmoney + ')' }} </span>
            <span class="btnmoney" style="margin-left:20px;background:#04a7f5">未提佣金：￥{{ item.task_yjmoney }}</span>
          </div>
          <div v-else-if="item.task_status == 3">
            <span>付款金额：</span>
            <span class="btnmoney" :class="{'blue':item.tx_status == 2 || item.tx_status == 3}"
                  @click="handleMoney(item)">{{ item.tx_status == 2 || item.tx_status == 3 ? '已提本金(￥' + item.task_bjmoney + ')' : '本金(￥' + item.task_bjmoney + ')' }} </span>
            <span class="btnmoney" :class="{'blue':item.tx_status == 3}" @click="onMoney(item)"
                  style="margin-left:10px">{{ item.tx_status == 3 ? '已提佣金(￥' + item.task_yjmoney + ')' : '佣金(￥' + item.task_yjmoney + ')' }}</span>
          </div>
          <div v-else>
            <span>付款金额：￥{{ item.task_bjmoney }}</span>
            <span style="margin-left:20px">佣金：￥{{ item.task_yjmoney }}</span>
            <p style="font-size:20px;color:red;font-weight:600">审核时间为24小时</p>
            <p style="font-size:20px;color:red;font-weight:600">一切以TB提交订单时间为准</p>
          </div>
          <div style="margin-top:10px;">
            <span style="font-size:16px;margin-top:10px;margin-bottom:10px;color:rebeccapurple;font-weight:600"
                  v-show="item.task_class == 'dy'">抖音号：{{ item.brushhands_tbname }}</span>
            <span style="font-size:16px;margin-top:10px;margin-bottom:10px;color:#f54d21;font-weight:600"
                  v-show="item.task_class == 'pt'">旺旺号：{{ item.brushhands_tbname }}</span>
            <span style="font-size:16px;margin-top:10px;margin-bottom:10px;color:#f54d21;font-weight:600"
                  v-show="item.task_class == 'pj'">旺旺号：{{ item.brushhands_tbname }}</span>
            <span style="font-size:16px;margin-top:10px;margin-bottom:10px;color:#f54d21;font-weight:600"
                  v-show="item.task_class == 'gy'">旺旺号：{{ item.brushhands_tbname }}</span>
            <span style="font-size:16px;margin-top:10px;margin-bottom:10px;color:#f54d21;font-weight:600"
                  v-show="item.task_class == 'll'">旺旺号：{{ item.brushhands_tbname }}</span>
            <span style="font-size:16px;margin-top:10px;margin-bottom:10px;color:lightpink;font-weight:600"
                  v-show="item.task_class == 'pdd'">拼多多号：{{ item.brushhands_tbname }}</span>
            <el-button
              type="danger"
              style="margin-left:20px;"
              v-if="item.pj_status==1&&item.task_class=='pj' ||
            item.pj_status==1&&item.task_class == 'pdd' ||
             item.pj_status==1&&item.task_class == 'dy'"
              size="mini" @click="Urgeevaluation(item)">催评价
            </el-button>
          </div>
          <div
            v-if="item.pj_status==1&&item.task_class=='pj' || item.pj_status==1&&item.task_class == 'pdd' || item.pj_status==1&&item.task_class == 'dy'"
            style="display:flex;flex-direction:column;font-size:16px;color:red;font-weight:600;">
            <p>等待商家上传评价后提取佣金</p>
          </div>
          <div
            v-if="item.pj_status==4&&item.task_class=='pj' || item.pj_status==4&&item.task_class == 'pdd' || item.pj_status==4&&item.task_class == 'dy'"
            style="display:flex;flex-direction:column;font-size:16px;color:red;font-weight:600;">
            <p>商家已上传评价，点击开始评价获取评价内容</p>
          </div>
        </div>
      </div>
      <div style="position:fixed;bottom:50px;left:0;width:100%;background:white;" v-if="total>1">
        <van-pagination v-model="page" :page-count="total" mode="simple" @change="pageChange"/>
      </div>
      <van-dialog v-model="vaultDialog" title="提现到金库" show-cancel-button @confirm="onConfirm"
                  @cancel="vaultDialog = false">
        <div class="dialog">
          <img src="../assets/img/money.png" alt="">
          <p style="font-size:26px;line-height: 50px;">￥{{ yjmoney }}</p>
          <p style="color: #808080;">佣金提现到金库</p>
        </div>
      </van-dialog>
<!--      <van-dialog v-model="Dialog" title="提现教程">-->
<!--        <viewer>-->
<!--          <div style="display:flex;justify-content:center;align-items: center">-->
<!--            <img src="../assets/4604e3e253e567065f37f738758bec3.png" style="width:80%" alt="">-->
<!--          </div>-->
<!--        </viewer>-->
<!--      </van-dialog>-->
    </div>
    <div class="nodata" v-else>
      <img src="../assets/img/nodata.png" alt="">
      <span class="textcontent">没有正在执行的活动哦，马上去申请~</span>
      <span class="taskbtn" @click="$router.push('/home')">申请活动</span>
    </div>
    <el-dialog
      title="上传评价截图"
      width="90%"
      :visible.sync="showings">
      <div style="display:flex;align-items: center;">
        <p>上传图片：</p>
        <el-upload
          class="upload-demo"
          :headers="importHeaders"
          action="/api/v1/PI/task/evaluate_img"
          :on-success="handlesuccess"
          v-show="image==''"
          multiple>
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
        <viewer>
          <img :src="image" alt="" style="width:100px;height:100px;" v-show="image!=''">
        </viewer>
      </div>
      <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submits()">确 定</el-button>
          <el-button @click="showings = false">取 消</el-button>
        </span>
    </el-dialog>
    <van-dialog v-model="showme" title="提现" show-cancel-button @confirm="ConfirmWithDraw">
          <div style="display:flex;flex-direction:column;align-items: center;justify-content: center;height:100px;font-size:18px;">
             <span>是否把本金为<b style="color:red;font-size:20px;">{{withDraw.task_bjmoney}}</b>元提现到金库</span>
             <p>提现过后在金库内查看</p>
          </div>
    </van-dialog>
    <return></return>
    <Footer permsg='1'></Footer>
  </div>
</template>

<script>
import {tasklist, businesstreasury, updateorderstatus, evaluate_get, urging_evaluation} from '../api/api';
import aestool from '@/utils/aestool.js';
import Footer from '../components/footer.vue'
import Return from "./returnone";
import AgainReturn from "./AgainReturn";
export default {
  components: {AgainReturn, Return, Footer},
  data() {
    return {
      active: 0,
      page: 1,
      total: 0,
      taskinfo: [],
      Dialog: true,
      image: "",
      showme:false,
      withDraw:{},
      ids: "",
      isshow: false,
      importHeaders: {token: localStorage.getItem('xfq_token')},
      vaultDialog: false,
      yjmoney: '',
      showings: false,
      taskid: '',
      currentPage: 1,
      taskclass: '',
    }
  },
  created() {
    if (this.$route.query.code) {
      sessionStorage.setItem('token', this.$route.query.t)
      if (this.$route.query.code == 1) {
        this.$toast('授权成功,请重新提现！')
      }
    }
    this.Dialog = true
    this.gettaskdata()
  },
  methods: {
    ConfirmWithDraw(){
      this.$router.push({
        name: 'withdrawal',
        params: {
          type: 'BJ',
          task: this.withDraw
        }
      })
    },
    Urgeevaluation(item) {
      let params = {
        task_id: item.task_id
      }
      urging_evaluation(params).then((res) => {
        if (res.Status == 200) {
          this.$toast(res.Message)
        } else {
          this.$toast(res.Message)
        }
      })
    },
    handlesuccess(val) {
      this.image = val.UrlImg
    },
    submits() {
      this.$axios.post('/api/v1/PI/task/pj_submits', {
        img: aestool.encrypt(this.image, 'CancelTaPjSubmit'),
        cancel_task: aestool.encrypt(this.ids, 'CancelTaPjSubmit')
      }).then((res) => {
        console.log(res);
        if (res.data.Status == 200) {
          this.$toast(res.data.Message)
          this.showings = false
          this.gettaskdata()
        } else {
          this.$toast(res.data.Message)
        }
      })
    },
    to_evaluate(create_time, id, task_class, baby_id, task_id) {
      if (task_class == 'pj') {
        this.showings = true
        let params = {
          baby_id: aestool.encrypt(baby_id, 'SyncorderzxPjGet'),
          task_id: aestool.encrypt(id, 'SyncorderzxPjGet'),
        }
        evaluate_get(params).then(res => {
          if (res.Status == 200) {
            let tempdata = JSON.parse(aestool.decrypt(res.Data, 'SyncorderzxPjGet'))
            console.log('评论数据', tempdata)
            this.data = tempdata
            this.data.imgs = JSON.parse(this.data.imgs)
            this.$router.push({
              path: '/evaluate',
              query: {baby_id: baby_id, id: id, order_Id: task_id}
            })
          } else {
            this.$toast(res.Message)
          }
        })
      } else {
        if (new Date().getTime() < new Date(create_time).getTime() + 24 * 60 * 60 * 1000 * 4) {
          this.$toast('请在四天后收货上传评价！')
        } else {
          this.ids = id
          console.log(this.ids);
          this.showings = true
        }
      }
    },
    onCopy(e) {
      this.$toast('复制成功！')
    },
    onError(e) {
      this.$toast('复制失败！')
    },
    //更新状态
    onUpdate(item) {
      let params = {
        order: aestool.encrypt(item.task_order, 'Syncorderzxcqwe0'),
        shop_name: aestool.encrypt(item.task_shopname, 'Syncorderzxcqwe0')
      }
      updateorderstatus(params).then(res => {
        console.log('更新状态', res)

        if (res.Status == 200) {
          this.$toast(res.Message)
          setTimeout(this.gettaskdata, 1500)
        } else {
          this.$toast(res.Message)
        }
      })
    },
    //佣金提现到金库
    onConfirm() {
      let toastload = this.$toast.loading({
        message: '加载中...',
        forbidClick: true
      });
      let params = {
        task_id: aestool.encrypt(this.taskid, 'Businesstreasury'),
        address: aestool.encrypt(sessionStorage.getItem('ip'), 'Businesstreasury'),
        task_type: aestool.encrypt(this.taskclass, 'Businesstreasury'),
      }
      businesstreasury(params).then(res => {
        toastload.clear()
        console.log('金库', res)
        if (res.Status == 200) {
          this.$toast(res.Message)
          setTimeout(this.gettaskdata(), 1500)
        } else {
          this.$toast(res.Message)
        }
      })
    },
    pageChange(val) {
      this.page = val
      this.gettaskdata()
    },
    gettaskdata() {
      let toastload = this.$toast.loading({
        message: '加载中...',
        forbidClick: true
      });
      let typeval
      if (this.active == 0) {
        typeval = 3
      } else if (this.active == 1) {
        typeval = 8
      } else if (this.active == 2) {
        typeval = 7
      } else if (this.active == 3) {
        typeval = 2
      } else if (this.active == 4) {
        typeval = 5
      } else if (this.active == 5) {
        typeval = 6
      }
      console.log('typeval', typeval)
      let params = {
        promptinfo: aestool.encrypt(typeval, 'tasklist87654321'),
        page: aestool.encrypt(this.page, 'tasklist87654321'),
        page_size: aestool.encrypt(10, 'tasklist87654321'),
      }
      tasklist(params).then(res => {
        toastload.clear()
        if (res.Status == 200) {
          this.total = Math.ceil(res.Count / 10)
          console.log(this.total);
          let temp = JSON.parse(aestool.decrypt(res.Data, 'tasklist87654321'))
          if (temp.length <= 0) {
            this.isshow = false
          } else {
            this.isshow = true
            let ipos
            temp.forEach(item => {
              ipos = item.create_time.indexOf("+")
              item.create_time = item.create_time.replace(/T/g, " ").substring(0, ipos)
            })
            this.taskinfo = temp
            console.log('活动', this.taskinfo)
          }
        } else {
          this.isshow = false
        }
      })
    },
    onappeal(item) {
      this.$router.push({
        name: 'sponsor',
        params: {
          taskId: item.id
        }
      })
    },
    onChange(index) {
      console.log('切换', index)
      this.gettaskdata()
    },
    //本金提现
    handleMoney(item) {
      if (item.tx_status == 2 || item.tx_status == 3) {
        this.$toast('本金已提现！')
      } else {

        this.withDraw = item
        this.showme = true
      }
    },
    //佣金提现
    onMoney(item) {
      if (item.tx_status == 1) {
        this.$toast('本金尚未提现！')
      } else if (item.tx_status == 3) {
        this.$toast('佣金已提现！')
      } else {
        this.vaultDialog = true
        this.yjmoney = item.task_yjmoney
        this.taskid = item.id
        this.taskclass = item.task_class
        console.log(this.taskclass);
      }
    },
  }
}
</script>
<style lang="stylus" scoped>
.taskmanage {
  height 100%

  .van-tabbar--fixed {
    position fixed
    top 0
  }

  .dialog {
    padding 20px 0 30px
    font-size 14px

    img {
      height 100px
    }

    p {
      text-align center
    }
  }

  .nodata {
    padding-top: 80px
    display flex
    flex-direction column
    justify-content center
    align-items center

    img {
      width 70%
    }

    .textcontent {
      font-size 14px
      color #a79478
    }

    .taskbtn {
      width 200px
      color #ffffff
      font-size 14px
      background #64c5ff
      text-align center
      line-height 36px
      margin-top 20px
    }
  }

  .activebox {
    position relative
    margin-top 50px
    margin-bottom 50px
    padding 10px
    background #f8f8f8

    .activeone {
      border-radius 5px
      margin-bottom 50px
      background #ffffff

      .titledate {
        font-size 14px
        padding 10px 0
        color #777
        display flex
        justify-content space-between
        align-items center
        border-bottom 1px solid #f8f8f8

        .first {
          margin-left 10px
          display flex
          align-items center
        }

        .typestyle {
          color #fff
          display inline-block
          line-height 24px
          padding 0 10px
          border-top-left-radius 12px
          border-bottom-left-radius 12px
        }
      }

      .picimg {
        display flex
        flex-direction column
        align-items center

        img {
          width 80px
          height 80px
          border-radius 5px
          margin 10px
        }

        span {
          text-align center
          display inline-block
          width 80px
          line-height 30px
          font-size 14px
          border-radius 20px
          background #a0c3fb
          color #3b7dfd
        }
      }
    }

    .activeone:last-child {
      margin-bottom 50px
    }

    .green {
      background #00d5c3
    }

    .red {
      background #f54d21
    }

    .blue {
      background #04a7f5
    }

    .purple {
      background rebeccapurple
    }

    .black {
      background black
    }

    .pink {
      background lightpink
    }

    .bottombox {
      padding 10px
      font-size 14px
      color #636363

      p {
        display flex
        justify-content space-between
        align-items center
        line-height 26px
      }

      div {
        line-height 26px
      }

      .btnmoney {
        background #f6aaa0
        color #ffffff
        padding 5px 10px
        border-radius 5px
      }

      .blue {
        background #bbb
      }
    }
  }
}
</style>


